<template>
  <basic-container>
    <avue-tabs :option="option"
               @change="handleChange"></avue-tabs>
    <span v-if="type.prop==='tab1'">


       <avue-form v-model="form"
                  :option="formOption">

       </avue-form>



    </span>
    <span v-else-if="type.prop==='tab2'">

      <avue-crud ref="crud"
                 :data="fieldData"
                 :option="crudOption"
                 @row-save="rowSave"
                 @row-update="rowUpdate"
                 @row-del="rowDel"
      ></avue-crud>
    </span>

    <span v-else-if="type.prop==='tab3'">

      <avue-crud ref="crud"
                 :data="fieldData"
                 :option="crudOption3"
                 @row-save="rowSave"
                 @row-update="rowUpdate"
                 @row-del="rowDel"
      ></avue-crud>
    </span>
    <div>
      <el-button type="primary"

                 @click="save">保存
      </el-button>


    </div>

  </basic-container>
</template>

<script>

import baseService from "../../../crud/baseService";
import {baseUrl} from "../../../config/env";
import PageConfig from "./PageConfig.vue";

export default {
  name: "codegenerator",
  components: {PageConfig},
  data() {
    return {
      allDictType: [],
      type: {},
      option: {
        column: [{
          icon: 'el-icon-info',
          label: '表信息',
          prop: 'tab1',
        }, {
          icon: 'el-icon-warning',
          label: '字段配置',
          prop: 'tab2',
        }, {
          icon: 'el-icon-warning',
          label: '页面配置',
          prop: 'tab3',
        }]
      },
      //是否
      whetherDict: [
        {
          label: "是",
          value: "0"
        },
        {
          label: "否",
          value: "1"
        }

      ],
      form: {
        tableName: "",
        entityName: "",
        tableComment: "",
        packageName: "",
        auth: "",
        moduleName: "",
        tableFields: [],
        interfacePrefix: ""

      },
      formOption: {
        labelWidth: 120,
        submitBtn: false,
        emptyBtn: false,
        column: [{
          label: '表名',
          prop: 'tableName',
          rules: [{
            required: true,
            message: "请输入表名",
            trigger: "blur"
          }
          ]
        },
          {
            label: '实体类名',
            prop: 'entityName',
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: '表注释',
            prop: 'tableComment',

            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: '包名',
            prop: 'packageName',
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: '作者',
            prop: 'auth',
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: '模块名',
            prop: 'moduleName',
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ],
            blur: ({value, column}) => {
              this.form.interfacePrefix = this.form.moduleName+"/"+this.form.entityName;
            },
          },
          {
            label: "接口前缀",
            prop: "interfacePrefix",
            search: false,
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: "新增按钮",
            prop: "addBtn",
            search: false,
            type: "radio",
            value: "0",
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: "修改按钮",
            prop: "editBtn",
            search: false,
            type: "radio",
            value: "0",
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: "删除按钮",
            prop: "delBtn",
            search: false,
            type: "radio",
            value: "0",
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },

          {
            label: "权限校验开关",
            prop: "verifyPermissions",
            search: false,
            type: "radio",
            value: "0",
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
        ]
      },
      fieldData: [],

      crudOption: {

        dialogType: 'drawer',
        dialogWidth: 1500,
        column: [


          {
            label: "字段名称",
            prop: "columnName",
            search: false,
            required: false,
            width: 150,
            disabled: true,

            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },


          {
            label: "字段类型",
            prop: "columnType",
            width: 150,
            search: false,
            required: false,
            disabled: true,
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },


          {
            label: "字段注释",
            prop: "columnComment",
            width: 150,

            search: false,
            required: false,
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },


          {
            label: "属性名",
            prop: "attrName",
            width: 150,
            search: false,
            required: false,
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },


          {
            label: "属性类型",
            prop: "attrType",
            width: 150,
            search: false,
            required: false,

            type: "select",
            dicData: [
              {
                label: "Long",
                value: "Long"
              },
              {
                label: "String",
                value: "String"
              },
              {
                label: "LocalDate",
                value: "LocalDate"
              },
              {
                label: "LocatDateTime",
                value: "LocatDateTime"
              },
              {
                label: "Integer",
                value: "Integer"
              },
              {
                label: "Float",
                value: "Float"
              },
              {
                label: "Double",
                value: "Double"
              },
              {
                label: "BigDecimal",
                value: "BigDecimal"
              },
              {
                label: "Boolean",
                value: "Boolean"
              },
              {
                label: "Object",
                value: "Object"
              },


            ],


            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },


          {
            label: "是否主键",
            prop: "isPk",
            search: false,
            required: false,
            value: "1",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]
          },


          {
            label: "是否必填",
            prop: "isRequired",
            search: false,
            value: "1",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]

          },


          {
            label: "是否为搜索项",
            prop: "isSearch",
            hide: true,
            width: 150,

            value: "1",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]
          }

        ]
      },
      crudOption3: {

        cellBtn: true,
        column: [
          {
            label: "字段名称",
            prop: "columnName",
            search: false,
            required: false,
            disabled: true,

            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: "字段注释",
            prop: "columnComment",

            search: false,
            required: false,
            rules: [{
              required: true,
              message: "请输入表名",
              trigger: "blur"
            }
            ]
          },
          {
            label: "是否必填",
            prop: "isRequired",
            cell: true,
            search: false,
            value: "1",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]

          }, {
            label: "是否为搜索项",
            prop: "isSearch",
            cell: true,
            value: "1",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]
          },

          {
            label: "表单是否显示",
            prop: "display",
            width: 100,
            cell: true,
            value: "0",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]
          },

          {
            label: "列表是否显示",
            prop: "hide",
            width: 100,
            cell: true,
            value: "1",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]
          },
          {
            label: "表单新增的时候是否显示",
            prop: "addDisplay",
            width: 150,
            cell: true,
            value: "0",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]
          },

          {
            label: "表单编辑的时候是否显示",
            prop: "editDisplay",
            width: 150,
            cell: true,
            value: "0",
            type: 'radio',
            dicData: [{
              label: '是',
              value: "0"
            }, {
              label: '否',
              value: "1"
            }],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ]
          },
          {
            label: "页面类型",
            prop: "pageType",
            width: 150,
            cell: true,
            search: false,
            required: false,
            type: "select",
            dicData: [{
              label: '输入框',
              value: "input"
            }, {
              label: '数字框',
              value: "number"
            }, {
              label: '选择框',
              value: "select"
            }, {
              label: '级联选择器',
              value: "cascader"
            }, {
              label: '多选框',
              value: "checkbox"
            }, {
              label: '单选框',
              value: "radio"
            }, {
              label: '日期',
              value: "date"
            }, {
              label: '时间',
              value: "time"
            }, {
              label: 'Switch开关',
              value: "switch"
            }, {
              label: '图片',
              value: "image"
            }, {
              label: '文件',
              value: "upload"
            }, {
              label: '树',
              value: "tree"
            }, {
              label: '字典值',
              value: "dict"
            }
              , {
                label: '引用',
                value: "quote"
              }


            ],
            rules: [{
              required: true,
              message: "请输入",
              trigger: "blur"
            }
            ],
            control: (val, form) => {
              console.log(val, form)

              if (val == "dict") {
                // 如果是字典值的话,就出来字典值的列表,让选择字典值
                return {
                  dictType: {
                    label: "字典",
                    display: true,
                    type: "select",
                    dicData: this.allDictType
                  },
                  dictUrl: {
                    display: false,
                    type: "input",
                  }
                }
              } else if (val == 'image' || val == 'upload') {

                return {
                  dictType: {
                    display: true,
                    type: "input",
                    label: '文件分类'
                  },
                  dictUrl: {
                    display: false,
                    type: "input",
                  }
                }
              } else if (val == "select" || val == "cascader" || val == "checkbox" || val == "radio" || val == "switch" || val == "tree") {
                return {
                  dictType: {
                    display: false,
                    type: "input",
                  },
                  dictUrl: {
                    display: true,
                  }
                }

              } else if (val == "quote") {
                // 引用类型,从现有的字段中选择引用的字段

                let colums = [];
                this.crudOption.column.forEach(a => {

                  colums.push({
                    value: a.prop,
                    label: a.label + "[" + a.prop + "]"
                  })
                })

                return {
                  dictType: {
                    label: "引用字段选择",
                    display: true,
                    type: "select",
                    dicData: colums
                  },
                  dictUrl: {
                    display: false,
                    type: "input",
                  }
                }

              } else {
                return {
                  dictType: {
                    display: false,
                    type: "input",
                  },
                  dictUrl: {
                    display: false,
                    type: "input",
                  }
                }
              }
            }
          },
          {
            label: "字典type",
            prop: "dictType",
            width: 150,
            display: false,
            allowCreate: true,
            filterable: true,
            cell: true,
            type: "select",
            dicUrl: baseUrl + "/system/sysDict/allType",

          },

          {
            label: "接口地址",
            prop: "dictUrl",
            cell: true,
            width: 200,

            type: "input",

          },


        ]
      }


    }
  }, methods:
      {
        init(row, item) {
          console.log(row, item)
          this.getInfo(row.id);
          baseService.getData("/system/sysDict/allType").then(res => {
            this.allDictType = res.data;
          });

        },
        getInfo(id) {
          baseService.getData("/generator/gTableInfo/" + id).then(res => {
            console.log(res)
            Object.assign(this.form, res.data);
            this.fieldData = res.data.tableFields

          });

        },
        handleChange(column) {
          this.type = column
          this.$message.success(JSON.stringify(column))
          console.log(this.fieldData)

          // this.fieldData2 = [];
          //
          // this.fieldData.forEach(a => {
          //   let res = {};
          //   for (let key in a) {
          //     if (key.startsWith("$")) {
          //       continue;
          //     }
          //     console.log(key)
          //     res[key] = a[key];
          //     console.log(key, a[key])
          //   }
          //   console.log(res)
          //   this.fieldData2.push(res)
          // })
          // console.log(this.fieldData2)

          // this.$nextTick(() => {
          //   setTimeout(() => {
          //     this.$refs.pageConfigRef.init(this.fieldData);
          //   }, 200)
          // })
        }, handleRowClick(row, event, column) {
          this.$refs.crud.rowEdit(row, row.$index);
        },
        rowSave(row, done, loading) {
          done();
          this.fieldData.push(row);

        },
        rowUpdate(row, index, done, loading) {
          done();
          this.fieldData[index] = row;
        },
        rowUpdate3(row, index, done, loading) {
          done();
          this.fieldData[index] = row;
        },
        rowDel(row, index) {
          // 删除
          this.fieldData = this.fieldData.filter(a => a.id != row.id)
        },
        save() {

          // 执行修改操作
          this.form.tableFields = this.fieldData;
          console.log(this.form);
          baseService.postJsonData("/generator/gTableInfo/updateTableInfo", this.form).then(res => {
            console.log(res.data)
            if (res.status != 200) {

              this.$message.error(res.msg);
            } else {
              this.$message.success("保存成功");
              // return
              this.$nextTick(() => {
                setTimeout(() => {
                  this.$emit("comClose")
                }, 200)
              });
            }

          });

        }
      },
  created() {
    this.type = this.option.column[0];
  },

}
</script>

<style scoped>

</style>
